<template>
	<view class="content">
		<view class="info">
			<view class="item">
				<view>用户头像</view>
				<image :src="img" @click="changeImg()" class="img_user"></image>
			</view>
			<view class="item">
				<view>真实姓名</view>
				<view class="text">{{name}}</view>
			</view>
			<view class="item">
				<view>身份证号</view>
				<view class="text">{{card}}</view>
			</view>
			<view class="item">
				<view>手机号码</view>
				<view class="text">{{phone}}</view>
			</view>
			<view class="item">
				<view>Email</view>
				<!-- <view class="text">{{email}}</view> -->
				<input type="text" placeholder="请输入邮箱" v-model="email" />
			</view>
			<view class="item">
				<view>性别</view>
				<uni-data-select v-model="sex" :localdata="sex_sel" @change="change"></uni-data-select>
			</view>
			<view class="item">
				<view>最高学历</view>
				<uni-data-select v-model="xueli" :localdata="xueli_sel" @change="change"></uni-data-select>
			</view>
			<view class="item">
				<view>婚姻状况</view>
				<uni-data-select v-model="hunyin" :localdata="hunyin_sel" @change="change"></uni-data-select>
			</view>
			<view class="item">
				<view>是否有房</view>
				<uni-data-select v-model="house" :localdata="house_sel" @change="change"></uni-data-select>
			</view>
			<view class="item">
				<view>有无房贷</view>
				<uni-data-select v-model="houseloan" :localdata="houseloan_sel" @change="change"></uni-data-select>
			</view>
			<view class="item">
				<view>是否有车</view>
				<uni-data-select v-model="car" :localdata="car_sel" @change="change"></uni-data-select>
			</view>
			<view class="item">
				<view>有无车贷</view>
				<uni-data-select v-model="carloan" :localdata="carloan_sel" @change="change"></uni-data-select>
			</view>
			<view class="item">
				<view>汽车品牌</view>
				<input type="text" placeholder="请输入汽车品牌" v-model="car_type" />
			</view>
			<view class="item">
				<view>购车年份</view>
				<input type="text" placeholder="请输入购车年份" v-model="car_year" />
			</view>
		</view>

		<view class="default_btn btn" @click="save">保存</view>
	</view>
</template>

<script>
	import {
		clientSelect,
		editUserInfo,
		fileUp,
	} from "@/common/js/index.js"
	export default {
		data() {
			return {
				userId: '',
				img: '',
				email: '',
				name: '',
				card: '',
				phone: '',
				sex: '',
				xueli: '',
				hunyin: '',
				house: '',
				houseloan: '',
				car: '',
				carloan: '',
				car_type: '',
				car_year: '',

				selInfo: '',
				sex_sel: [
					{value: 0,text: '女'},
					{value: 1,text: '男'},
				],
				xueli_sel: [],
				hunyin_sel: [],
				house_sel: [
					{value: 0,text: '无'},
					{value: 1,text: '有'},
				],
				houseloan_sel: [
					{value: 0,text: '无'},
					{value: 1,text: '有'},
				],
				car_sel: [
					{value: 0,text: '无'},
					{value: 1,text: '有'},
				],
				carloan_sel: [
					{value: 0,text: '无'},
					{value: 1,text: '有'},
				],


			}
		},
		onLoad(e) {
			var info = JSON.parse(e.info)
			console.log(info);
			this.userId = info.id
			this.img = info.header_img
			this.name = info.real_name
			this.card = info.idno
			this.phone = info.mobile
			this.email = info.email
			this.sex = info.sex
			this.xueli = info.graduation
			this.hunyin = info.marriage
			this.house = info.hashouse
			this.houseloan = info.houseloan
			this.car = info.hascar
			this.carloan = info.carloan
			this.car_type = info.car_brand
			this.car_year = info.car_year
			this.select()
		},
		methods: {
			changeImg(num) {
				var that = this
				uni.chooseImage({
					count: 1,
					sizeType: ["compressed"],
					success(response) {
						console.log(response);
						// 选择图片后, 返回的数据
						var fileUrl = response.tempFilePaths[0]
						console.log(fileUrl);
						fileUp({
							file: fileUrl,
							user_id:that.userId
						}).then(res => {
							var info = JSON.parse(res)
							if (info.code == 200) {
								that.img = info.data[0]
								console.log(that.img);
								// that.save()
							} else {
								uni.showToast({
									title: info.msg,
									icon: 'error',
									duration: 3000
								})
							}
						})
					}
				})
			},
			change(e) {
				console.log("e:", e);
			},
			save() {
				var info = {
					user_id: this.userId,
					header_img: this.img,
					email: this.email,
					sex: this.sex,
					graduation: this.xueli,
					marriage: this.hunyin,
					hashouse: this.house,
					houseloan: this.houseloan,
					hascar: this.car,
					carloan: this.carloan,
					car_brand: this.car_type,
					car_year: this.car_year,
				}
				
				editUserInfo(info).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.code == 200) {
						setTimeout(function() {
							uni.navigateBack()
						}, 2000)
					}
				})
			},
			select() {
				clientSelect().then(res => {
					var list = res.data
					for (var i = 0; i < list.graduation.length; i++) {
						var info = {
							value: list.graduation[i],
							text: list.graduation[i]
						}
						this.xueli_sel.push(info)
					}
					console.log(this.xueli_sel);
					
					for (var i = 0; i < list.marriage.length; i++) {
						var info = {
							value: list.marriage[i],
							text: list.marriage[i]
						}
						this.hunyin_sel.push(info)
					}
					console.log(this.hunyin_sel);
				})
			}
		},
		onPageScroll(e) {},
	}
</script>

<style scoped lang="scss">
	.content {
		position: relative;
		overflow: hidden;
	}

	.info {
		margin: 40rpx 30rpx;
		padding: 0 30rpx 40rpx;
		background-color: white;
		background: #FFFFFF;
		border-radius: 12rpx;

		// overflow: hidden;
		.title {
			font-weight: 500;
			font-size: 32rpx;
			text-align: center;
			padding-top: 30rpx;
		}

		.item {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			border-bottom: 2rpx solid #EEEEEE;

			input {
				flex: 1;
				text-align: right;
				font-size: 26rpx;
			}

			.text {
				font-size: 26rpx;
				color: #999999;
			}

			.img_user {
				width: 84rpx;
				height: 84rpx;
				border-radius: 50%;
			}
		}
	}

	/deep/.uni-select {
		margin-left: auto;
		width: 300rpx;
		text-align: right;
		border: none;
	}

	/deep/ .uni-select__selector-item {
		display: block;
		text-align: right !important;
	}

	.btn {
		margin: 80rpx auto 150rpx;
	}
</style>